<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>迷你计算器</title>
<link rel="stylesheet" type="text/css" href="./css/display.css">
<script src="./js/counter.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="counter">
    <div class="display" id="display">
    00
    </div>

    <div class="control">
        <div class="section1">
            <div class="btn"  id="btn_clear">
                C
            </div>
            <div class="btn" id="btn_porn">
                +/-
            </div>
            <div class="btn" id="btn_percent">
                %
            </div>
            <div class="btn" id="btn_multi">
                *
            </div>
        </div>
        <div class="section2">
            <div class="section3">
                <div class="btn-cell">
                    <div class="number" id="btn_7">
                        7
                    </div>
                    <div class="number" id="btn_8">
                        8
                    </div>
                    <div class="number" id="btn_9">
                        9
                    </div>
                </div>
                <div class="btn-cell">
                    <div class="number" id="btn_4">
                        4
                    </div>
                    <div class="number" id="btn_5">
                        5
                    </div>
                    <div class="number" id="btn_6">
                        6
                    </div>
                </div>
                <div class="btn-cell">
                    <div class="number" id="btn_1">
                        1
                    </div>
                    <div class="number" id="btn_2">
                        2
                    </div>
                    <div class="number" id="btn_3">
                        3
                    </div>
                </div>
                <div class="btn-cell">
                    <div class="number0" id="btn_0">
                        0
                    </div>
                    <div class="number" id="btn_point">
                        .
                    </div>
                        
                </div>
            </div>
            <div class="section4">
                <div class="btn" id="btn_divide">
                    /
                </div>
                <div class="btn" id="btn_add">
                    +
                </div>
                <div class="btn" id="btn_minus">
                    -
                </div>
                <div class="btn" id="btn_equal">
                    =
                </div>
            </div>
        </div>

    </div>
</div>        
</body>
<script>

    $(document).ready(function(){
      var counter = new Counter()
      $("#btn_clear").click(function(){
        resetBtn("btn_clear")
        var v = counter.clear()
        $("#display").text(v)
      });

      $("#btn_porn").click(function(){
        resetBtn("btn_porn")
        var v = counter.setPositiveOrNegative()
        $("#display").text(v)
      });

      $("#btn_percent").click(function(){
        var v = counter.percent()
        resetBtn("btn_percent")
        $("#display").text(v)
      });

      $("#btn_multi").click(function(){
        var v = counter.multi()
      });

      $("#btn_divide").click(function(){
        var v = counter.divide()
      });

      $("#btn_add").click(function(){
        var v = counter.add()
      });

      $("#btn_minus").click(function(){
        var v = counter.minus()
      });
      
      $("#btn_7").click(function(){
        var v = counter.inputNumber(7)
        resetBtn("btn_7")
        $("#display").text(v)
      });

      $("#btn_8").click(function(){
        var v = counter.inputNumber(8)
        resetBtn("btn_8")
        $("#display").text(v)
      });

      $("#btn_9").click(function(){
        var v = counter.inputNumber(9)
        resetBtn("btn_9")
        $("#display").text(v)
      });

      $("#btn_4").click(function(){
        var v = counter.inputNumber(4)
        resetBtn("btn_4")
        $("#display").text(v)
      });

      $("#btn_5").click(function(){
        var v = counter.inputNumber(5)
        resetBtn("btn_5")
        $("#display").text(v)
      });

      $("#btn_6").click(function(){
        var v = counter.inputNumber(6)
        resetBtn("btn_6")
        $("#display").text(v)
      });

      $("#btn_1").click(function(){
        var v = counter.inputNumber(1)
        resetBtn("btn_1")
        $("#display").text(v)
      });

      $("#btn_2").click(function(){
        var v = counter.inputNumber(2)
        resetBtn("btn_2")
        $("#display").text(v)
      });

      $("#btn_3").click(function(){
        var v = counter.inputNumber(3)
        resetBtn("btn_3")
        $("#display").text(v)
      });

      $("#btn_0").click(function(){
        var v = counter.inputNumber(0)
        resetBtn("btn_0")
        $("#display").text(v)
      });

      $("#btn_point").click(function(){
        var v = counter.inputPoint()
        resetBtn("btn_point")
        $("#display").text(v)
      });

      $("#btn_empty").click(function(){
        
      });

      $("#btn_equal").click(function(){
        var v = counter.equal()
        resetBtn("btn_equal")
        $("#display").text(v)
      });

      //页面控制方法
      function resetBtn(divId){
        $("#"+divId).css("font-size", "40pt");
        var timer = setTimeout(function(){
            $("#"+divId).css("font-size", "30pt");
            timer = null
        },600)
      }
    });
</script>

</html>